[JavaScript-CSS-Firefox] Cannot change borderColor of TD
Posted
by Tadeus Prastowo
on Stack Overflow
See other posts from Stack Overflow
or by Tadeus Prastowo
Published on 2010-03-03T13:42:22Z
Indexed on
2010/03/24
0:13 UTC
Read the original article
Hit count: 543
Using JS to set the background color of a TD is fine. But, setting the border color is problematic in FF 3.0.18 although IE 6 doesn't experience this. FF is problematic in that it requires the TD element to have an attribute style initialized to border-style: solid. Without that, setting border color of a TD won't work. Is this known bug?
How do I set the border color without having to set style attribute as well as the initialization value?
I know another trick of setting the class attribute instead of setting the border color directly. Is this an indication that somehow TD hates having its border color set dynamically? Is this known as well?
The problematic code is below (the goal is find out why setting the border color of simple truth 1 does not work while simple truth 3 works when I employ the trick described above):
<html>
<head>
<title>Quirks FF 3.0.18</title>
<style type="text/css">
table {
border-collapse: collapse;
}
</style>
<script type="text/javascript">
function changeBgColor()
{
document.getElementById('simple').style.backgroundColor='yellow';
document.getElementById('simple2').style.backgroundColor='yellow';
document.getElementById('simple3').style.backgroundColor='yellow';
}
function quirk(id)
{
var x = document.getElementById(id);
x.style.border = '2px solid red';
}
</script>
</head>
<body>
<input type="button" onclick="changeBgColor()" value="Change background color"/>
<input type="button" onclick="quirk('simple')" value="Change border color 1"/>
<input type="button" onclick="quirk('simple2')" value="Change border color 2"/>
<input type="button" onclick="quirk('simple3')" value="Change border color 3"/>
<table>
<tr><td id="simple">Simple truth 1</td></tr>
</table>
<table>
<tr><td><span id="simple2">Simple truth 2</span></td></tr>
<table>
<tr><td id="simple3" style="border-style: solid">Simple truth 3</td></tr>
</table>
</body>
</html>
© Stack Overflow or respective owner
